{% extends "base.html" %}
{% block body %}


<div class="single-page">
    <div class="single-page-artical">
        <ol class="breadcrumb">
            <li><a href="{{ url_for('pic.home') }}">Home</a></li>
            <li class="active">{{ src_pic.id }}</li>
            <li class="active">{{ dst_pic.id }}</li>
        </ol>

        <div class="artical-content" id="compare_area">
            <div class="row">
                <div class="col-sm-6 col-md-6 col-lg-6 col-xs-6">
                    <a href="{{src_pic.uri}}" target="_blank">{{ src_pic.img | safe }}</a>
                    <div class="row">
                        {{src_pic.note_html() | safe}}<br>
                        <i class="fa fa-photo"></i>
                        图片格式: {{src_pic.file_type}}<br>
                        分辨率: <span style="color:{%if src_pic.resolution < dst_pic.resolution %}red{% elif src_pic.resolution == dst_pic.resolution %}green{%else%}blue{%endif%}">{{src_pic.resolution_hr()}}</span><br>
                        文件大小: <span style="color:{%if src_pic.file_size > dst_pic.file_size %}red{%else%}blue{%endif%}">{{src_pic.file_size_hr()}}</span><br>
                        导入时间: {{src_pic.create_time}}<br>
                        查看次数: {{src_pic.pv}}
                    </div>
                    <input type="button" class="btn btn-sm btn-info" value="旋转" onclick="onRotatePic('{{src_pic.id}}');">
                    <input type="button" class="btn btn-sm btn-info" value="水平翻转" onclick="onScaleXPic('{{src_pic.id}}');">
                    <input type="button" class="btn btn-sm btn-danger pull-right" id="delete-left" value="删除" onclick="onDelete_dbRecord('{{src_pic.id}}');">
                </div>

                <div class="col-sm-6 col-md-6 col-lg-6 col-xs-6">
                    <a href="{{dst_pic.uri}}" target="_blank">{{ dst_pic.img | safe }}</a>
                    <div class="row">
                        {{dst_pic.note_html() | safe}}<br>
                        <i class="fa fa-photo"></i>
                        图片格式: {{dst_pic.file_type}}<br>
                        分辨率: <span style="color:{%if src_pic.resolution < dst_pic.resolution %}blue{% elif src_pic.resolution == dst_pic.resolution %}green{%else%}red{%endif%}">{{dst_pic.resolution_hr()}}</span><br>
                        文件大小: <span style="color:{%if src_pic.file_size > dst_pic.file_size %}blue{%else%}red{%endif%}">{{dst_pic.file_size_hr()}}</span><br>
                        导入时间: {{dst_pic.create_time}}<br>
                        查看次数: {{dst_pic.pv}}
                    </div>
                    <input type="button" class="btn btn-sm btn-info" value="旋转" onclick="onRotatePic('{{dst_pic.id}}');">
                    <input type="button" class="btn btn-sm btn-info" value="水平翻转" onclick="onScaleXPic('{{dst_pic.id}}');">
                    <input type="button" class="btn btn-sm btn-danger pull-right" id="delete-right" value="删除" onclick="onDelete_dbRecord('{{dst_pic.id}}');">

                </div>
            </div>
        </div>

        <div class="picturl-action">
        </div>

    </div>
 </div>

{% endblock %}

{% block script %}
<script type="text/javascript">
js_pic = {
    "delete_api_url": "{{url_for('api.delete',label='pic')}}",
    "note_edit_url": "{{url_for('api.note')}}",
    "rotate_pic_api_url": "{{ url_for('api.pic_rotate') }}",
    "scalex_pic_api_url": "{{ url_for('api.pic_scalex') }}",
};


let compare_area = document.getElementById('compare_area');
compare_area.addEventListener('dblclick', noteDblClick);

document.addEventListener("keydown", function(event) {
    const tag = event.target.tagName.toLowerCase();
    if (tag === "input" || tag === "textarea" || event.target.isContentEditable) return;

    if(event.key === "ArrowLeft"){$("#delete-left").click()}
    else if(event.key === "ArrowRight"){$("#delete-right").click()}
})
</script>
{% endblock %}